<script setup lang="ts">
import { storeToRefs } from 'pinia';

import { addAiImageStore } from '#/store';

const addAiImage = addAiImageStore();
const { selectImageList, lodingFromMaxAi } = storeToRefs(addAiImage);

function setAiItem(params: any) {
  addAiImage.cretedUseAiItem([params]);
}
function setAiAllList() {
  addAiImage.cretedUseAiItem(selectImageList.value);
}
</script>

<template>
  <div class="relative h-full w-28">
    <div class="scrollbar-white h-full w-full overflow-y-auto pb-16">
      <a-space direction="vertical">
        <div
          v-for="item in selectImageList"
          :key="item.indexKey"
          class="relative mb-2 cursor-pointer"
          @click="addAiImage.selectImage(item)"
        >
          <img
            :height="100"
            :src="item.newUrl"
            :width="100"
            class="rounded-md"
          />
          <a-checkbox :checked="item.checked" class="absolute left-1 top-1" />
          <a-button
            :loading="item.lodingStatus"
            class="mt-2 w-full"
            type="primary"
            @click="() => setAiItem(item)"
          >
            AI作图
          </a-button>
        </div>
      </a-space>
    </div>
    <div class="absolute bottom-0 left-0 w-full bg-slate-50 pr-2 pt-2">
      <a-button
        :loading="lodingFromMaxAi"
        class="w-full"
        type="primary"
        @click="setAiAllList"
      >
        全部生成
      </a-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.scrollbar-white {
  &::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background: #d9d9d9;
    border-radius: 4px;
  }
}
</style>
